<template>
  <div>
  <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="账号" prop="username">
    <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
  </el-form-item>
    <el-form-item label="昵称" prop="">
    <el-input type="text" v-model="ruleForm.nickName" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="电话号码" prop="tel">
    <el-input v-model.number="ruleForm.tel"></el-input>
  </el-form-item>
  <el-form-item>
    <el-upload
  action="http://localhost:3000/images/upload"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-success="success"
 >
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">添加客户</el-button>
  </el-form-item>
</el-form-item>
  </el-form>
  </div>
</template>

<script>
import {createNamespacedHelpers}  from 'vuex';
let {mapState,mapActions}=  createNamespacedHelpers('customer');
let { mapState:mapState2, mapActions:mapActions2 } = createNamespacedHelpers("salesperson");
export default {
  data() {
    
      
    return {
      ruleForm: {
           password: '',
           username: '',
           tel: '',
           state:false,
           nickName:'',
           img:'',
           salesmanId:''
        },
           salseArr:[]       ,
          dialogImageUrl: '',
          dialogVisible: false,
      }
    
  },
  computed:{
        ...mapState2(['tableData'])
  },
  watch:{
     tableData(new1){
        this.getSalesPerson();
          // this.salseArr=new1;
          console.log('watch',this.salseArr)
     }
  },
  methods:{
     ...mapActions(['addCustomer']),
     ...mapActions2(['getSalesPerson','getSales']),
      async submitForm() {    
            let {data}= await this.getSales();
          
            // 获取销售员数组的长度随机分配客户
           let num =  parseInt(Math.random()*data.length);
           this.ruleForm.salesmanId =data[num]._id;
           let data1 =  await this.addCustomer(this.ruleForm);
        if(data1.status){
        this.$message({
          message: '添加客户成功',
          type: 'success'
        });
        //添加成功清空对象
        this.ruleForm={};
        }
      },
     
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //上传成功
      success(file){
         if(file.status===1){
          this.ruleForm.img=file.filename;      
         }
         
      }
      
  },
 
}
</script>

<style lang="scss" scoped>
.el-form{
    width: 60%;
    margin: 70px auto 0;
}
</style>